<template>
  <div class="mt-breadcrumb">
    <div v-if="showBackBtn" class="icon icon-return-left" @click="goBack"></div>
    <div class="text">{{ menuName }}</div>
  </div>
</template>

<script>
export default {
  name: "MtBreadcrumb",

  data () {
    return {};
  },

  computed: {
    menuName () {
      return this.$route.meta.title;
    },
    showBackBtn () {
      return this.$route.meta.showBack;
    }
  },

  created () {},

  mounted () {},

  methods: {
    goBack () {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/theme.scss";
$height: 8rem;
.mt-breadcrumb {
    display: flex;
    padding: 0 3.9rem;
    height: $height;
    width: 100%;
    .icon {
        width: 2.4rem;
        height: 2.4rem;
        margin-top: 2.8rem;
        text-align: center;
        font-size: 1.7rem;
        font-weight: 700;
        color: $mt-black__trans6;
        border: 1px solid $mt-black__trans6;
        border-radius: 50%;
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s;
        &:hover {
          color: #4D9BD5;
          border-color: #4D9BD5;
        }
        &.icon-return-left {
            position: relative;
            &:before {
              // content: "\E904";
              position: absolute;
              left: 50%;
              top: 2.4px;
              transform: translate(-45%, 0);
            }
        }
    }
    .text {
        height: $height;
        line-height: $height;
        color: #000000;
        font-size: 2rem;
        font-weight: 700;
        margin-left: 1rem;
    }
}
</style>
